{% extends "base.html" %}

{% block title %}安全知识小贴士 - 开源安全创意工坊{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2><i class="fas fa-lightbulb"></i> 安全知识小贴士</h2>
    <div>
        <span class="badge bg-primary">共 {{ tips|length }} 条</span>
    </div>
</div>

{% if tips %}
    <div class="row">
        {% for tip in tips %}
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <span class="badge bg-info">{{ tip.category }}</span>
                        <span class="badge bg-secondary">{{ tip.difficulty }}</span>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title">{{ tip.title }}</h5>
                        <p class="card-text">{{ tip.content }}</p>
                        
                        <div class="d-flex justify-content-between align-items-center mt-3">
                            <button class="btn btn-sm btn-outline-danger" onclick="likeTip({{ tip.id }})">
                                <i class="fas fa-heart"></i> <span id="likes-{{ tip.id }}">{{ tip.likes }}</span>
                            </button>
                            <small class="text-muted">
                                <i class="fas fa-calendar"></i> {{ tip.created_at.strftime('%Y-%m-%d %H:%M') }}
                            </small>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
{% else %}
    <div class="text-center py-5">
        <i class="fas fa-inbox fa-5x text-muted mb-4"></i>
        <h4 class="text-muted">暂无安全贴士</h4>
        <p class="text-muted">安全贴士正在准备中，请稍后再来查看</p>
    </div>
{% endif %}

<!-- 安全知识分类 -->
<div class="row mt-5">
    <div class="col-12">
        <h4 class="mb-3"><i class="fas fa-tags"></i> 安全知识分类</h4>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="fas fa-globe fa-2x text-primary mb-2"></i>
                <h6>Web安全</h6>
                <small class="text-muted">SQL注入、XSS、CSRF等</small>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="fas fa-lock fa-2x text-success mb-2"></i>
                <h6>密码学</h6>
                <small class="text-muted">加密算法、哈希函数等</small>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="fas fa-network-wired fa-2x text-info mb-2"></i>
                <h6>网络安全</h6>
                <small class="text-muted">防火墙、入侵检测等</small>
            </div>
        </div>
    </div>
    <div class="col-md-3 mb-3">
        <div class="card text-center">
            <div class="card-body">
                <i class="fas fa-server fa-2x text-warning mb-2"></i>
                <h6>系统安全</h6>
                <small class="text-muted">操作系统、权限管理等</small>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function likeTip(tipId) {
    fetch(`/api/tips/${tipId}/like`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        document.getElementById(`likes-${tipId}`).textContent = data.likes;
    })
    .catch(error => {
        console.error('Error:', error);
        alert('点赞失败，请重试');
    });
}
</script>
{% endblock %}
